<template>
    <div class="container">

        <div class="container-content">
            <div class="content-title">订单管理</div>
            <el-table :data="orderList" style="width: 100%">
                <el-table-column prop="id" label="ID"></el-table-column>
<!--                <el-table-column prop="orderNo" label="订单号"></el-table-column>-->
                <el-table-column prop="username" label="归属用户"></el-table-column>
                <el-table-column prop="shopName" label="归属门店"></el-table-column>
                <el-table-column prop="count" label="商品数量"></el-table-column>
                <el-table-column prop="price" label="总价"></el-table-column>
                <el-table-column prop="state" label="订单状态">
                    <template slot-scope="scope">
                       <span v-if="scope.row.state == 1">未支付</span>
                        <span v-if="scope.row.state == 2">已支付</span>
                        <span v-if="scope.row.state == 3">已确认</span>
                        <span v-if="scope.row.state == 4">已退款</span>
                        <span v-if="scope.row.state == 5">-已取消</span>
                    </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="修改时间"></el-table-column>
                <el-table-column fixed="right" label="操作" width="250">
                    <template slot-scope="scope">
                        <el-button @click="itemDetail(scope.row)" type="text" size="small">查看商品</el-button>
                        <el-button @click="confirmOrder(scope.row)" type="text" size="small" v-if="scope.row.state == 2">确认订单</el-button>
                        <el-button @click="cancelOrder(scope.row)" type="text" size="small" v-if="scope.row.state == 2">退款</el-button>
                        <el-button @click="cancelOrder2(scope.row)" type="text" size="small" v-if="scope.row.state != 2">退款</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="订单商品" :visible.sync="dialogVisible" width="60%">
            <el-table :data="item" style="width: 100%">
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="itemName" label="商品名称"></el-table-column>
                <el-table-column prop="count" label="购买数量"></el-table-column>
                <el-table-column prop="unitPrice" label="商品单价"></el-table-column>
                <el-table-column prop="price" label="商品总价"></el-table-column>
            </el-table>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import {allOrder,confirmOrder,cancelOrder,cancelOrder2} from "@/api/common";

    export default {
        name: "OrderMgr",
        data() {
            return {
                user: {},
                dialogVisible: false,
                orderList:[],
                item:[],
            }
        },
        created() {
            let userJson = localStorage.getItem('bus-user');
            if (userJson) {
                let user = JSON.parse(userJson);
                this.user = user
                let param = {businessId: user.id}
                this.queryList(param)
            } else {
                this.$message.info("请您重新登陆")
            }
        },
        methods:{
            queryList(param){
                allOrder(param).then(res => {
                    if (res.code == 200) {
                        this.orderList = res.data
                    }else {
                        this.$message.error(res.msg || "查询商品数据失败")
                    }
                })
            },
            itemDetail(row){
                this.item = row.lineItems;
                this.dialogVisible = true;
            },
            confirmOrder(row){
                this.$confirm('该用户的订单已支付，是否进行确认？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success'
                }).then(() => {
                    let param = {
                        orderId:row.id
                    }
                    confirmOrder(param).then(res => {
                        if (res.code == 200) {
                            let param = {businessId: this.user.id}
                            this.queryList(param)
                            this.$message.success("订单确认成功")
                        }else {
                            this.$message.error(res.msg || "订单确认失败")
                        }
                    })
                })
            },
            cancelOrder(row){
                this.$confirm('该用户的订单已支付，是否取消订单并退款？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let param = {
                        orderId:row.id
                    }
                    cancelOrder(param).then(res => {
                        if (res.code == 200) {
                            let param = {businessId: this.user.id}
                            this.queryList(param)
                            this.$message.success("退款成功")
                        }else {
                            this.$message.error(res.msg || "订单取消失败")
                        }
                    })
                })
            },
            cancelOrder2(row){
                this.$confirm('是否取消此订单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let param = {
                        orderId:row.id
                    }
                    cancelOrder(param).then(res => {
                        if (res.code == 200) {
                            let param = {businessId: this.user.id}
                            this.queryList(param)
                            this.$message.success("退款成功")
                        }else {
                            this.$message.error(res.msg || "订单取消失败")
                        }
                    })
                })
            }
        },

    }
</script>

<style scoped>
    .container-content {
        margin: 30px;
    }

    .content-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }
</style>
